﻿<!-- #layout name=default -->
<div id="main" class="offset-top">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="page-header">
                <h1 class="title">Register a domain</h1>
            </div>
            <!-- ko ifnot:confirm -->
            <div data-bind="visible:!confirm()">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" placeholder="domain name keyword" data-bind="value:domain, event: { keyup: handleEnter }" name="domain" class="form-control input-lg" />
                        <span class="input-group-btn">
                            <button type="button" data-bind="click:search" class="btn blue btn-lg">Search</button>
                        </span>
                    </div>
                </div>
            </div>
            <!-- /ko -->
            <!-- ko if:!confirm() && suggests() && suggests().length -->
            <table class="table table-striped table-hover" data-bind="visible:suggests() && suggests().length">
                <caption data-bind="visible:!available()">Suggested domains</caption>
                <thead>
                    <tr>
                        <th>Domain</th>
                        <th>Price</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody data-bind="foreach:suggests">
                    <tr>
                        <td data-bind="text:domain"></td>
                        <td>
                            <!-- ko if:price > 0-->
                            <span data-bind="html:$root.currencySymbol() + price"></span> <span>First year</span>
                            <!-- /ko -->
                            <!-- ko if:price <= 0 -->
                            Unknow
                            <!-- /ko -->
                        </td>
                        <td>
                            <!-- ko if:price > 0-->
                            <div class="btn-group pull-right">
                                <button type="button" class="btn btn-xs green" data-bind="click:$root.select.bind({item:$data,amount:1})">Buy it</button>
                                <button type="button" class="btn btn-xs green dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></button>
                                <ul class="dropdown-menu" role="menu" data-bind="foreach:$root.yearOptions(price)">
                                    <li>
                                        <a href="javascript:;" data-bind="click:$root.select.bind({item:$parent,amount:key}),html:$root.formatYearPrice($data)"></a>
                                    </li>
                                </ul>
                            </div>
                            <!-- /ko -->
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- /ko -->
            <!-- ko if:confirm -->
            <table class="table" data-bind="visible:confirm">
                <thead>
                    <tr>
                        <th>Domain</th>
                        <th>Duration</th>
                        <th>Unit price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-bind="text:domain"></td>
                        <td data-bind="text:$root.formatedYear()"></td>
                        <td data-bind="text:unitPrice"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td><span>Total</span>: <strong data-bind="html: currencySymbol() + ' ' + totalPrice()"></strong></td>
                    </tr>
                </tbody>
            </table>
            <div class="panel panel-default" data-bind="visible:confirm">
                <div class="panel-heading">
                    <h6 class="panel-title">Payment</h6>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="radio">
                            <label>
                                <input type="radio" value="wechat" data-bind="checked:payment, checkedValue:'balance', attr: { disabled: totalPrice() > balance() }">
                                <span>Balance</span>: 
                                <span data-bind="html: currencySymbol() + ' ' + (balance()*100)/100"></span>
                                <span data-bind="visible: totalPrice() > balance()">(Insufficient balance)</span>
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" value="wechat" data-bind="checked:payment,checkedValue:'wechat'">
                                <span>WeChat payment</span>: 
                                <span data-bind="html: currencySymbol() + ' ' + totalPrice()"></span>
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" value="paypal" data-bind="checked:payment,checkedValue:'paypal'">
                                <span>Paypal payment</span>: 
                                <span data-bind="html: currencySymbol() + ' ' + totalPrice()"></span>
                            </label>
                        </div>
                        <!--<div class="radio">
                                <label>
                                    <input type="radio" value="alipay" data-bind="checked:payment,checkedValue:'alipay'">Alipay
                                </label>
                            </div>-->
                    </div>
                </div>
            </div>
            <!-- /ko -->

            <ul class="pager">
                <li class="next" data-bind="visible:confirm"><a class="btn green" href="javascript:;" data-bind="click:submit">Pay now!</a></li>
                <li class="previous"><a class="btn gray" href="javascript:;" data-bind="visible:confirm,click:cancel">Cancel</a></li>
            </ul>
        </div>
    </div>
    <div data-bind="component: {name: 'cashier-modal'}"></div>
</div>


<div id="payment-qrcode-container" class="modal fade" data-backdrop="static" data-bind="modal:showQrcode">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" data-bind="text:domain"></h4>
            </div>
            <div class="modal-body">
                <h2>Wechat Pay</h2>
                <div id="qrcode"></div>
            </div>
            <!--<div class="modal-footer">
                    <a class="btn green" href="javascript:;" data-bind="click:checkPay">Payment success</a>
                </div>-->
        </div>
    </div>
</div>

<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/View/Market/Scripts/components/CashierModal.js",
            "/_Admin/Scripts/lib/jquery.qrcode.min.js"
        ])
    })()
</script>
<script src="/_Admin/View/Market/Scripts/Kooboo.Market.js"></script>
<script src="/_Admin/View/Domains/Register.js"></script>